<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2023-12-19 13:40:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-12-29 16:23:31
-->
<template>
  <div class="content">
    <div class="_content">
      <div class="pcflex">
        <img class="zxpic" :src="info" />
        <div class="transforms">
          <div v-if="!data.lstStatus" class="StatusDisplayer">
            <icon class="iconfont icon-laba"></icon
            >&nbsp;&nbsp;2362008人已查询,了解信用风险提前预测…
          </div>
          <div
            v-if="data.lstStatus"
            class="back"
            @click="data.lstStatus = false"
          >
            <i class="icon iconfont icon-fanhui"></i>
            上一步
          </div>
          <div v-if="data.lstStatus" class="des-sy">
            <div>提示：为保证信用报告的准确性，请填写身份信息~</div>
          </div>
          <el-form :model="data.form">
            <div v-if="!data.lstStatus" class="phonebook" tabindex="1">
              <span>*</span>
              <el-form-item label="手机号码：">
                <el-input
                  v-model="data.form.phoneNumber"
                  placeholder="输入11位手机号"
                />
              </el-form-item>
            </div>
            <div v-if="!data.lstStatus" class="phonebook" tabindex="1">
              <span>*</span>
              <el-form-item label="真实姓名：">
                <el-input
                  v-model="data.form.realName"
                  placeholder="输入真实姓名"
                />
              </el-form-item>
            </div>
            <div v-if="data.lstStatus" class="phonebook" tabindex="1">
              <span>*</span>
              <el-form-item label="身份证号：">
                <el-input
                  v-model="data.form.idCard"
                  placeholder="请输入您的身份证号"
                />
              </el-form-item>
            </div>
          </el-form>
          <div class="keyAgreement">
            <el-checkbox v-model="data.checkedType"></el-checkbox>
            <div>
              我已阅读和同意<span @click="agreement"
                >&nbsp;《报告查询服务协议》</span
              >
            </div>
          </div>
          <!-- <div
          v-if="data.lstStatus"
            class="outstanding"
            @click="!data.lstStatus ? login() : queryCreditReport()"
          >
            立即查看
          </div> -->
          <el-button
            type="primary"
            class="outstanding"
            @click="!data.lstStatus ? login() : queryCreditReport()"
            :loading="data.loading"
            >{{ data.loading ? "查询提交中" : "立即查看" }}</el-button
          >
          <div class="effectName">
            <div class="Outlook" @click="goToExamplePage">
              <img :src="effect" alt="" /><span>查看示例效果</span>
            </div>
            <div class="looking" @click="goToinquire">
              <img :src="unknown" alt="" /><span>查询记录</span>
            </div>
          </div>
        </div>
      </div>
      <div class="mb_xx">
        <div class="mb_xy">
          <p class="mb_title">信用查询</p>
          <p class="mb_des">只为解决您的信用问题</p>
        </div>
        <div class="item-list">
          <div class="t-item">
            <div class="t-s">
              <icon class="iconfont icon-heimingdan"></icon>
            </div>
            <div>黑名单风险报告</div>
          </div>
          <div class="t-item">
            <div class="t-s">
              <icon class="iconfont icon-qitajilu"></icon>
            </div>
            <div>被执行人记录</div>
          </div>
          <div class="t-item">
            <div class="t-s">
              <icon class="iconfont icon-chakan"></icon>
            </div>
            <div>司法风险记录</div>
          </div>
          <div class="t-item">
            <div class="t-s">
              <icon class="iconfont icon-woderizhi"></icon>
            </div>
            <div>个人信用分统计</div>
          </div>
          <div class="t-item">
            <div class="t-s">
              <icon class="iconfont icon-anquanfengxian"></icon>
            </div>
            <div>个人风险扫描</div>
          </div>
          <div class="t-item">
            <div class="t-s">
              <icon class="iconfont icon--yishengjiedu"></icon>
            </div>
            <div>个人信用解读</div>
          </div>
        </div>
      </div>
      <div class="info_box">
        <div>(温馨提示:本报告非央行征信报告)</div>
        <div>您的个人信息仅用作信息报告查询</div>
        <div>您的报告将于7天后自动删除,请放心查询</div>
        <div>信息采用MD5+RSA加密算法，保护个人信息安全</div>
        <div>
          严格按照相关法律法规及监管单位的操作要求,合法合规经营,若您对查询结果有异议,发起异议处理
        </div>
        <div>
          {{ data.web_info.title }}
          <a target="_blank" style="color: rgb(102, 102, 102)"
            >陕ICP备2023018152号-1</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import IdCardValid from '../uint/IdCardvalid.js';
import { reactive, onMounted, watch, defineProps, defineEmits } from "vue";
import info from "../assets/index_image/zz1-7772177f.png";
import effect from "../assets/index_image/download(1).png";
import unknown from "../assets/index_image/download.png";
import request from "../api/reuests";
import { setItem, removeItem } from "../uint/localStorage.js";
import { useRouter } from "vue-router"; //引入路由
const router = useRouter();
const data = reactive({
  form: {
    phoneNumber: "",
    realName: "",
    idCard: "",
  },
  checkedType: true, // 协议状态
  lstStatus: false,
  web_info: {},
  loading:false
});
watch(
  () => data.lstStatus,
  (newValue, oldValue) => {
    window.scrollTo(0, 0);
  },
  { deep: true }
);

//电话号跟姓名查看
const login = () => {
  // data.login_btn_text = '正在登录...'
  //验证realName必须为中文
  const pattern = /^[\u4e00-\u9fa5]{2,5}$/; // 使用正则表达式验证2-5个字的中文
  const reg = /^1\d{10}$/;
  if (!data.checkedType) {
    ElMessage.error("请先勾报查询协议！");
    return false;
  }
  if (!reg.test(data.form.phoneNumber)) {
    ElMessage.error("请填写正确的手机号");
    return false;
  }
  if (!pattern.test(data.form.realName)) {
    ElMessage.error("请填写2-5个字的中文姓名");
    return false;
  }

  request({
    url: "/index/login",
    method: "POST",
    data: {
      phoneNumber: data.form.phoneNumber,
      realName: data.form.realName,
    },
  })
    .then((res) => {
      if (res.code == 200) {
        // 将res.data.data.token存到cookies
        setItem("token", res.data.token);
        setItem("info", {
          phoneNumber: data.form.phoneNumber,
          realName: data.form.realName,
        });
        data.lstStatus = true;

        //跳转至/queryStatus页面
        // router.push("/queryStatus");
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      console.error(err);
    });
};

//检查号码是否符合规范，包括长度，类型
const isCardNo = (item) => {
  //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
  var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
  if (reg.test(item) === false) {
    return false;
  }
  return true;
};
//取身份证前两位,校验省份
const checkProvince = (item) => {
  var city = {
    11: "北京",
    12: "天津",
    13: "河北",
    14: "山西",
    15: "内蒙古",
    21: "辽宁",
    22: "吉林",
    23: "黑龙江 ",
    31: "上海",
    32: "江苏",
    33: "浙江",
    34: "安徽",
    35: "福建",
    36: "江西",
    37: "山东",
    41: "河南",
    42: "湖北",
    43: "湖南",
    44: "广东",
    45: "广西",
    46: "海南",
    50: "重庆",
    51: "四川",
    52: "贵州",
    53: "云南",
    54: "西藏 ",
    61: "陕西",
    62: "甘肃",
    63: "青海",
    64: "宁夏",
    65: "新疆",
    71: "台湾",
    81: "香港",
    82: "澳门",
    91: "国外 ",
  };
  var province = item.substr(0, 2);
  if (city[province] === undefined) {
    return false;
  }
  return true;
};

//校验日期
const verifyBirthday = (year, month, day, birthday) => {
  var now = new Date();
  var now_year = now.getFullYear();
  //年月日是否合理
  if (
    birthday.getFullYear() == year &&
    birthday.getMonth() + 1 == month &&
    birthday.getDate() == day
  ) {
    //判断年份的范围（0岁到130岁之间)
    var time = now_year - year;
    if (time >= 0 && time <= 150) {
      return true;
    }
    return false;
  }
  return false;
};

//检查生日是否正确
const checkBirthday = (item) => {
  var len = item.length;
  //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字
  if (len === "15") {
    var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
    var arr_data = item.match(re_fifteen);
    var year = arr_data[2];
    var month = arr_data[3];
    var day = arr_data[4];
    var birthday = new Date("19" + year + "/" + month + "/" + day);
    return verifyBirthday("19" + year, month, day, birthday);
  }
  //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X
  if (len == "18") {
    var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
    var arr_data = item.match(re_eighteen);
    var year = arr_data[2];
    var month = arr_data[3];
    var day = arr_data[4];
    var birthday = new Date(year + "/" + month + "/" + day);
    return verifyBirthday(year, month, day, birthday);
  }
  return false;
};

//15位转18位身份证号
const changeFivteenToEighteen = (item) => {
  if (item.length == "15") {
    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
    var arrCh = new Array(
      "1",
      "0",
      "X",
      "9",
      "8",
      "7",
      "6",
      "5",
      "4",
      "3",
      "2"
    );
    var cardTemp = 0,
      i;
    item = item.substr(0, 6) + "19" + item.substr(6, item.length - 6);
    for (i = 0; i < 17; i++) {
      cardTemp += item.substr(i, 1) * arrInt[i];
    }
    item += arrCh[cardTemp % 11];
    return item;
  }
  return item;
};

//校验位的检测
const checkParity = (item) => {
  //15位转18位
  item = changeFivteenToEighteen(item);
  var len = item.length;
  if (len == "18") {
    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
    var arrCh = new Array(
      "1",
      "0",
      "X",
      "9",
      "8",
      "7",
      "6",
      "5",
      "4",
      "3",
      "2"
    );
    var cardTemp = 0,
      i,
      valnum;
    for (i = 0; i < 17; i++) {
      cardTemp += item.substr(i, 1) * arrInt[i];
    }
    valnum = arrCh[cardTemp % 11];
    if (valnum == item.substr(17, 1)) {
      return true;
    }
    return false;
  }
  return false;
};

const checkWithin = () => {
  //是否为空
  if (data.form.idCard === "") {
    ElMessage.error("请输入18位身份证号");
    return false;
  }
  if (data.form.idCard.length !== 18) {
    ElMessage.error("请输入18位身份证号");
    return false;
  }

  //检查号码是否符合规范，包括长度，类型
  if (isCardNo(data.form.idCard) === false) {
    ElMessage.error("证件号码不符合规范");
    return false;
  }

  //检查省份
  if (checkProvince(data.form.idCard) === false) {
    ElMessage.error("证件号码不对校验省份错误");
    return false;
  }

  //校验生日
  if (checkBirthday(data.form.idCard) === false) {
    ElMessage.error("证件号码校验生日错误");
    return false;
  }

  //检验位的检测
  if (checkParity(data.form.idCard) === false) {
    ElMessage.error("您的身份证校验位不正确,请重新输入");
    return false;
  }
  return true;
};

// 身份证号立即查看
const queryCreditReport = () => {
  data.loading=true
  if (!checkWithin()) {
    return false;
  }
  request({
    url: "/index/tj",
    method: "POST",
    data: {
      phoneNumber: data.form.phoneNumber,
      realName: data.form.realName,
      idCard: data.form.idCard,
    },
  })
    .then((res) => {
      if (res.code == 200) {
        setItem("info", {
          phoneNumber: data.form.phoneNumber,
          realName: data.form.realName,
          idCard: data.form.idCard,
          prov: IdCardValid.getInfo(data.form.idCard)[0],
          sex: IdCardValid.getInfo(data.form.idCard)[1],
          age: IdCardValid.getInfo(data.form.idCard)[2],
        });
        //跳转至/queryStatus页面
        setTimeout(function () {
          removeItem("applyPay");
          data.loading=false
          router.push("/inquireOk");
        }, 100);
      } else {
         data.loading=false
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      console.error(err);
    });
};
// 跳转到样例页面
const goToExamplePage = () => {
  // 使用uniapp的导航功能跳转到示例页面
  router.push("/yangli");
};
// 跳转到服务协议页面
const agreement = () => {
  router.push("/agreement");
};
const goToinquire = () => {
  router.push("/historyRecord");
};

// 获取公司名称，价格，红包金额
const getData = () => {
  request({ url: "/index/getinfo", method: "GET" })
    .then((res) => {
      if (res.code == 200) {
        data.web_info = res.data;
        setItem("web_info", data.web_info);
      }
    })
    .catch((err) => {
      console.error(err);
    });
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.el-checkbox {
  -webkit-tap-highlight-color: transparent !important;
}
.content {
  min-height: 100vh;
  width: 100%;
  height: 100%;
  background-size: cover;
}
._content {
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
}

.zxpic {
  width: 80%;
  max-width: 400px;
  margin-bottom: 120px;
}
.transforms {
  width: 450px;
  margin: initial;
  padding: 25px 25px 5px;
  border-radius: 10px;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  color: rgba(0, 0, 0);
  font-size: 14px;
  .StatusDisplayer {
    background: rgba(251, 93, 21, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    color: #fb5d15;
    white-space: nowrap;
    min-height: 32px;
    margin-bottom: 15px;
  }
  .keyAgreement {
    display: flex;
    align-content: center;
    padding-left: 8px;
    margin-bottom: 15px;
    margin-top: -10px;
    div {
      height: 32px;
      line-height: 32px;
      padding-left: 8px;
      span {
        color: #1677ff;
      }
    }
  }
  .des-sy {
    text-align: left;
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    white-space: nowrap;
  }
  .back {
    text-align: left;
    color: #666;
    font-size: 12px;
    display: flex;
    cursor: pointer;
    margin-bottom: 20px;
    margin-top: -15px;
    width: 70px;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  /deep/.el-form-item__label {
    color: rgba(0, 0, 0);
    padding: 0 01px 0 0;
  }
  /deep/.el-input__wrapper {
    box-shadow: 0 0 0 0px;
  }
  /deep/ .el-input__wrapper:hover {
    box-shadow: 0 0 0 0px inset;
  }
  /deep/.el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0px inset;
  }
}
.phonebook {
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  height: 50px;
  transition: all 0.2s;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 11px;
  font-size: 14px;
  border-radius: 6px;
  margin-bottom: 15px;
  flex: 1;
  span {
    color: red;
  }
}
.phonebook:hover {
  box-shadow: 0 0 0 1px #409eff inset;
}
.outstanding {
  background: linear-gradient(180deg, #fc5d4b, #cb321a);
  box-shadow: 0 5px 20px #f13d064d;
  color: #fff;
  width: 100%;
  height: 50px;
  padding: 4px 15px;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  line-height: 42px;
  margin-bottom: 24px;
}
.outstanding:hover {
  opacity: 0.8;
}
.effectName {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  div {
    display: flex;
    align-items: center；;
  }
  .Outlook {
    img {
      width: 16px;
      margin-right: 2px;
    }
  }
  .looking {
    img {
      width: 20px;
      margin-right: 2px;
    }
  }
}
.mb_xy {
  display: none;
  font-size: 14px;
  background: #fff;
  border-radius: 10px;
  margin: 15px auto 10px;
  width: calc(100% - 40px);
  overflow: hidden;
  white-space: nowrap;
  .mb_title {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    position: relative;
  }
  .mb_title:after {
    position: absolute;
    bottom: 0;
    background: #ff8f00;
    opacity: 0.28;
    height: 6px;
    width: 70px;
    left: 50%;
    content: "";
    transform: translate(-50%);
  }
  .mb_des {
    margin: 0;
    color: #333333a1;
    font-size: 12px;
  }
}
.item-list {
  display: flex;
  justify-content: center;
  background-color: #fff;
  color: #333;
  padding: 20px 0;
  flex-wrap: wrap;
}
.t-item {
  width: 190px;
  height: 65px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
}
.t-s {
  font-size: 34px;
  height: 34px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  .iconfont {
    font-size: 28px;
  }
  .icon-heimingdan {
    font-size: 34px;
  }
}
.info_box {
  font-size: 12px;
  color: #666;
  line-height: 22px;
  padding-top: 50px;
}
/deep/.el-button {
  border-color: #ffffff;
}

@media (min-width: 0px) and (max-width: 1200px) {
  .content {
    background-image: url(../assets/index_image/h5-18255dc0.png);
  }
  ._content {
    max-width: 750px;
    box-shadow: 0 0 15px 4px #dbcfad;
    min-height: 100vh;
  }
  .zxpic {
    // width: 540px;
    margin-bottom: 0px;
  }
  .transforms {
    margin: 20px auto 10px;
    width: calc(100% - 40px);
    position: relative;
    padding: 20px 20px 10px;
  }
  .phonebook {
    height: 38px;
  }
  .outstanding {
    height: 38px;
    line-height: 30px;
  }
  .mb_xx {
    font-size: 14px;
    background: #fff;
    border-radius: 10px;
    margin: 15px auto 10px;
    width: calc(100% - 40px);
    overflow: hidden;
    white-space: nowrap;
  }
  .mb_xy {
    display: block;
  }
  .t-item {
    width: 30%;
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 1200px) {
  .pcflex {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    height: calc(100vh - 160px);
    justify-content: space-evenly;
    min-height: 600px;
  }
  .content {
    background-image: url(../assets/index_image/pc-b9b31013.png);
  }
  .zxpic {
    transform: scale(1.1);
  }
}
</style>
